/**
 * @author Created by qiush on 2017-06-01.
 */

import * as React from 'react';

import {IView} from '../../types/IView';
import {IAttr} from '../../types/IAttr';
import StylePaneItem from './StylePaneItem';
import styles from './styles';

import './AttributePane.css';

export interface StylePaneProps {
  designId: string;
  selectedView: IView;
  target: 'style' | 'hoverStyle';
}

class StylePane extends React.Component<StylePaneProps, undefined> {

  render() {
    return (
      <div className="Attribute-items">
        {styles.map(style => this.renderStyle(style))}
      </div>
    );
  }

  private renderStyle(style: IAttr) {
    return (
      <StylePaneItem key={style.name} {...this.props} attribute={style}/>
    );
  }
}

export default StylePane;
